---
category: Display
created: '2022-09-24'
description: Create a calendar with CSS grid
keywords: css calendar, css grid
thumbnail: /assets/css-layout/thumbnails/calendar.png
title: Calendar
---

## HTML

```html index.html
<div class="calendar">
    <!-- Week days -->
    <div class="calendar__weekday">Mon</div>
    <div class="calendar__weekday">Tue</div>
    <div class="calendar__weekday">Wed</div>
    <div class="calendar__weekday">Thu</div>
    <div class="calendar__weekday">Fri</div>
    <div class="calendar__weekday">Sat</div>
    <div class="calendar__weekday">Sun</div>

    <!-- Days of the previous month -->
    <div class="calendar__day calendar__day--disabled">30</div>
    <div class="calendar__day calendar__day--disabled">31</div>

    <!-- Days of the current month -->
    <div class="calendar__day">1</div>
    <div class="calendar__day">2</div>

    <!-- The current day -->
    <div class="calendar__day calendar__day--current">...</div>

    <!-- Days of the next month -->
    <div class="calendar__day calendar__day--disabled">1</div>
    <div class="calendar__day calendar__day--disabled">2</div>
</div>
```

## CSS

```css styles.css
.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar__weekday {
    border-bottom: 1px solid #d1d5db;
    padding: 0.125rem;
}

.calendar__day {
    border-bottom: 1px solid #d1d5db;
    border-right: 1px solid #d1d5db;
    padding: 0.25rem;
    text-align: center;
}

.calendar__day--current {
    background-color: #3b82f6;
    color: #fff;
}

.calendar__day:nth-child(7n + 1) {
    border-left: 1px solid #d1d5db;
}

.calendar__day--disabled {
    color: #d1d5db;
}
```

<Playground>
```css styles.css hidden
body {
    align-items: center;
    display: flex;
    justify-content: center;
}
.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    width: 16rem;
}

.calendar__weekday {
    border-bottom: 1px solid #d1d5db;
    padding: 0.5rem;
    text-align: center;
}

.calendar__day {
    border-bottom: 1px solid #d1d5db;
    border-right: 1px solid #d1d5db;
    padding: 0.5rem;
    text-align: center;
}

.calendar__day--current {
    background-color: #3b82f6;
    color: #fff;
}

.calendar__day:nth-child(7n + 1) {
    border-left: 1px solid #d1d5db;
}

.calendar__day--disabled {
    color: #e5e7eb;
}
```

```html index.html hidden
<div class="calendar">
    <div class="calendar__weekday">Mon</div>
    <div class="calendar__weekday">Tue</div>
    <div class="calendar__weekday">Wed</div>
    <div class="calendar__weekday">Thu</div>
    <div class="calendar__weekday">Fri</div>
    <div class="calendar__weekday">Sat</div>
    <div class="calendar__weekday">Sun</div>

    <div class="calendar__day calendar__day--disabled">29</div>
    <div class="calendar__day calendar__day--disabled">30</div>
    <div class="calendar__day calendar__day--disabled">31</div>

    <div class="calendar__day">1</div>
    <div class="calendar__day">2</div>
    <div class="calendar__day">3</div>
    <div class="calendar__day">4</div>
    <div class="calendar__day">5</div>
    <div class="calendar__day">6</div>
    <div class="calendar__day">7</div>
    <div class="calendar__day">8</div>
    <div class="calendar__day">9</div>
    <div class="calendar__day">10</div>

    <div class="calendar__day">11</div>
    <div class="calendar__day">12</div>
    <div class="calendar__day">13</div>
    <div class="calendar__day">14</div>
    <div class="calendar__day">15</div>
    <div class="calendar__day">16</div>
    <div class="calendar__day">17</div>
    <div class="calendar__day">18</div>
    <div class="calendar__day">19</div>
    <div class="calendar__day">20</div>

    <div class="calendar__day">21</div>
    <div class="calendar__day">22</div>
    <div class="calendar__day calendar__day--current">23</div>
    <div class="calendar__day">24</div>
    <div class="calendar__day">25</div>
    <div class="calendar__day">26</div>
    <div class="calendar__day">27</div>
    <div class="calendar__day">28</div>
    <div class="calendar__day">29</div>
    <div class="calendar__day">30</div>
    <div class="calendar__day">31</div>

    <div class="calendar__day calendar__day--disabled">1</div>
    <div class="calendar__day calendar__day--disabled">2</div>
    <div class="calendar__day calendar__day--disabled">3</div>
</div>
```
</Playground>
